<template>
	<view>
		<view class="container">
			<view class="column list-item">
				<view class="row " style="align-items: center;">
					<text>设备编号:</text>
					<text>{{equipment.code}}</text>
				</view>
				<view class="row" style="align-items: center;">
					<text>设备名称:</text>
					<text>{{equipment.ename}}</text>
				</view>
				<view class="row" style="align-items: center;">
					<text>设备地址:</text>
					<text style="color: #a2a2a2;">{{equipment.address}}</text>
				</view>
				<view class="row" style="align-items: center;margin-top: 20rpx;">
					<!-- <view class="row">
						<text>库存:</text>
						<text style="color: #a2a2a2;">{{equipment.stock}}</text>
					</view> -->
					<view class="button" @click="scan" style="">
						开始兑换
					</view>
				</view>
				
			</view>
		</view>
		<uni-popup ref="alertDialog" type="dialog">
			<uni-popup-dialog type="warning" title="提示" :buttonArr="['取消','确定']" :content="content"
				@confirm="dialogConfirm" @close="dialogClose"></uni-popup-dialog>
		</uni-popup>
		<uni-popup ref="progress" type="center" :maskClick="false">
			<view class="column align-items-center" style="width: 100%;height: 100%;">
				<arprogress borderWidth="22" width="400" inactiveColor="#eee" activeColor="#3ED2D2" :percent="progress">
					<text style="color: #656565;">出货中{{progress}}%</text></arprogress>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import arprogress from '@/components/ar-circle-progress/index.vue'
	export default {
		components:{
			arprogress
		},
		data() {
			return {
				equipment: "",
				content: "确定使用",
				bagProduct: "",
				userInfo: "",
				progress: 0
			};
		},
		created() {},
		onShow() {
			this.userInfo = uni.getStorageSync(this.$util.USER_INFO)
			this.getDictItemByName()
			this.$util.accessPage(2)
		},
		onLoad(data) {
			if(data.equipment){
				this.equipment = JSON.parse(data.equipment)
			}
		},
		onBackPress() {
			// if(this.progress >=10&&this.progress<=95){
			// 	 uni.showModal({
			// 		title: '提示',
			// 		content: '环保袋正在出货中,确定返回上一页？',
			// 		success: res=> {
			// 			if (res.confirm) {
			// 				// 退出当前应用，改方法只在App中生效
			// 				this.$refs.progress.close();
			// 				this.progress=0;
			// 				uni.closeSocket();
			// 				uni.navigateBack({})
			// 			} else if (res.cancel) {
							
			// 			}
			// 		}
			// 	});
			// 	return true
			// }else if (this.progress==0){
			// 	return false
			// }
		},
		methods: {
			getUserInfo() {
				console.log("更新个人信息")
				this.$util.doGet('/user/manager/userInfoList', {}, {}, true).then(res => {
					console.log(res.data)
					if (res.data.code == this.$ResponseStatus.OK) {
						this.userInfo = res.data.data
						uni.setStorageSync(this.$util.USER_INFO, res.data.data)
					}
				}).catch(error => {
					console.log(error)
				})
			},
			//生成订单
			addOrder() {
				this.$util.doGet(
					`/mallOrder/addOrder/${this.equipment.imei}`, {}, {},
					true).then(res => {
					console.log("生成订单", res.data)
					if (res.data.code == this.$ResponseStatus.OK) {
						this.order = res.data.data
						if (this.order.id) {
							this.$refs.alertDialog.open()
						} else {
							this.$util.showInfoToast("兑换失败")
						}
					}

				}).catch(error => {
					console.log(error)
				})
			},
			//开始兑换
			scan() {
				if(!this.equipment.stock){
					this.$util.showInfoToast("库存不足，无法兑换")
					return
				}
				if (this.userInfo.totalPoints < this.bagProduct.itemValue) {
					this.$util.showInfoToast("你的云豆不足,无法兑换")
					return
				}
				this.submitState = false
				this.addOrder();
			},
			getDictItemByName() {
				this.$util.doGet("/dict/getDictItemByName?dictCode=bagProduct&itemName=price", {}, {}, true).then(res => {
					if (res.data.code == this.$ResponseStatus.OK) {
						this.bagProduct = res.data.data
						this.content += this.bagProduct.itemValue + "云豆兑换?"
					}
				}).catch(error => {
					console.log(error)
				})
			},
			//确认兑换
			dialogConfirm() {
				if(this.submitState){
					return
				}
				this.submitState = true
				this.$util.doGet(
					`/mallOrder/payOrder/${this.order.id}`, {}, {},
					true).then(res => {
					if (res.data.code == this.$ResponseStatus.OK) {
						this.$refs.alertDialog.close()
						console.log("生成ID",res.data.data)
						// this.shipmentSocket(res.data.data);
						getApp().shipmentSocket(res.data.data,this.userInfo,this.bagProduct)
						uni.navigateBack({})
					}
				}).catch(error => {
					console.log(error)
				})
			},
			shipmentSocket(id) {
				uni.connectSocket({
					url: this.$util.SOCKET_URL + `/webSocket/yunBag/${id}`,
				});
				uni.onSocketOpen(res1 => {
					this.$refs.progress.open()
					console.log('开始出货');
					this.submitState = false
					this.progress = 10
					this.timerSocket = setInterval(() => {
						this.progress += 10
						if (this.progress == 90) {
							this.progress += 5
							if (this.progress == 95) {
								clearInterval(this.timerSocket);
								this.timerSocket = null;
							}
						}
					}, 1000)
				});
				uni.onSocketMessage(res2 => {
					console.log(res2.data)
					let data = JSON.parse(res2.data)
					this.progress = 100
					this.$refs.progress.close()
					if (data.code == this.$ResponseStatus.OK) {
						this.userInfo.totalPoints -= this.bagProduct.itemValue
						this.$util.showInfoToast("出货成功")
					} else {
						this.$util.showInfoToast("出货失败")
					}
					clearInterval(this.timerSocket);
					this.timerSocket = null;
					this.progress = 0
					uni.closeSocket();
				});
			},
			dialogClose() {
				this.$util.doGet(
					`/mallOrder/cancelOrder/${this.order.id}`, {}, {},
					true).then(res => {
					if (res.data.code == this.$ResponseStatus.OK) {
						this.$refs.alertDialog.close()
						uni.navigateBack()
					}
				}).catch(error => {
					console.log(error)
				})
			},
		}
	}
</script>

<style lang="scss">
	.container {
		padding: 0rpx 35rpx;
	}

	.list-item {
		border-bottom: solid 1rpx #EEEEEE;
		padding: 30rpx 0rpx;

		text {
			font-size: 28rpx;
		}

		text:nth-child(2) {
			margin-left: auto;
		}
	}

	.button {
		padding: 15rpx 80rpx;
		background-color: #1D9FFA;
		color: #FFFFFF;
		border-radius: 60rpx;
		margin: 0 auto;
	}
</style>
